import request from 'umi-request';
import { history } from 'umi';
import { Button, Form, Input, Card, Row, Col } from 'antd';
import styles from './index.less';
import { message } from 'antd';

const Login = () => {


  const onFinish = async (values) => {
    try {
      const response = await request.post('/api/login',
        {
          data: values,
          headers: {
            'Content-Type': 'application/json',
          },
        })

      if (response.code === 200) {
        const username = response.data
        localStorage.setItem('username', JSON.stringify(username));
        history.push('/home')
      } else {
        message.error(response.message); // 添加错误提示
      }
    } catch (error) {
      console.log(error);
    }
  };



  return (
    <Row align="middle" className={styles.rows}>
      <Col span={7} offset={15}>
        <Card title="请登录">
          {/* 定义登录表单的配置项： */}
          <Form
            name="basic" /* name="basic"：设置表单的名字为 “basic”。 */
            labelCol={{
              span: 4,
            }}
            wrapperCol={{
              span: 20,
            }}
            initialValues={{
              /* 设置表单的初始值 */ remember: true,
            }}
            onFinish={onFinish}
            autoComplete="off"
          >
            {/* 账号 */}
            <Form.Item
              label="账号" /* 定义表单项的标签名 */
              name="username" /* 会作为 onFinish 回调函数的参数 values 对象中的属性。 */
              rules={[
                /* 定义表单项的验证规则 */
                {
                  required: true,
                  message: '请输入你的用户名!',
                },
              ]}
            >
              <Input />
            </Form.Item>

            {/* 密码 */}
            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入你的密码!',
                },
              ]}
            >
              <Input.Password />
            </Form.Item>

            {/* 登录 */}
            <Form.Item
              wrapperCol={{
                offset: 19,
                span: 5,
              }}
            >
              <Button type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </Col>
    </Row>
  );
};
export default Login;
